<template>
    <div v-if="Boolean(room.data.anchor)" class="item">
        <div class="left">
            <img :src="room.data.anchor?.asset_icon.replace('i0.', 's1.')" alt="">
            <div>
                <div class="award-name">
                    {{ room.data.anchor?.award_name }} * {{ room.data.anchor?.award_num }}
                </div>
                <div  class="award-detail">
                    <span>{{ room.data.anchor?.require_text }}</span>
                    <span>{{ room.data.anchor?.award_price_text }}</span>
                    <span>在线 {{ room.room.online }}</span>
                </div>
                <div class="award-detail">
                    剩余时间 {{ timerString }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="award-detail">
                <div>
                    主播： {{ room.data.anchor?.danmu }}
                </div>
                <div>
                    房间ID: {{ room.roomid }}
                </div>
            </div>
            <div class="enter" @click="intoRoom">
                进入
            </div>
        </div>
    </div>
    <div v-else-if="Boolean(room.data.popularity_red_pocket)" class="item">
        <div class="left">
            <img :src="room.data.popularity_red_pocket?.[0]?.awards?.[0]?.gift_pic" alt="">
            <div>
                <div class="award-name">
                    {{ room.data.popularity_red_pocket?.[0]?.awards?.[0]?.gift_name }} * {{ room.data.popularity_red_pocket?.[0]?.awards?.[0]?.num }}
                </div>
                <div  class="award-detail">
                    <span>{{ room.data.popularity_red_pocket?.[0]?.join_requirement ? '关注主播' : '' }}</span>
                    <span>{{ room.data.popularity_red_pocket?.[0]?.total_price }}</span>
                    <span>在线 {{ room.room.online }}</span>
                </div>
                <div class="award-detail">
                    剩余时间 {{ timerString }}
                </div>
            </div>
        </div>
        <div class="right">
            <div class="award-detail">
                <div>
                    主播： {{ room.room.uname }}
                </div>
                <div>
                    房间ID: {{ room.roomid }}
                </div>
            </div>
            <div class="enter" @click="intoRoom">
                进入
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { RoomDataItem } from '../services/cloud';
import dayjs from 'dayjs';

@Options({
  props: {
    room: {} as RoomDataItem
  },
  data (vm) {
    return {
      timerString: ''
    };
  },
  mounted () {
    this.timer = setInterval(() => {
      let startTime: number;
      if (this.room.data.anchor) {
        startTime = this.room.data.anchor?.current_time + this.room.data.anchor?.time;
      } else {
        startTime = this.room.data.popularity_red_pocket?.[0]?.end_time;
      }
      const leftTimestamp = startTime - Math.floor(new Date().valueOf() / 1000);
      if (leftTimestamp <= 0) {
        this.timerString = '已过期';
      } else {
        this.timerString = dayjs.unix(leftTimestamp).format('mm:ss');
      }
    }, 1000);
  },
  methods: {
    intoRoom () {
      window.open(`https://live.bilibili.com${this.room.room.link}`);
    }
  }
})
export default class HelloWorld extends Vue {
    room!: RoomDataItem;
}
</script>

<style lang="less" scoped>

.item {
    padding: 4px 0px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}
.item .left {
    display: flex;
    align-items: center;
}
.award-name {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.award-detail {
    font-size: 12px;
    text-align: left;
}
.award-detail span {
    margin-right: 4px;
}
img {
    width: 25px;
    height: 25px;
    margin-right: 0.5rem;
}

.right {
    display: flex;
    text-align: left;
    align-items: center;
}
.right .award-detail {
    text-align: right;
}

.enter {
    margin-left: 12px;
    background-image: -webkit-gradient(linear, left top, right top, from(#ecd39d), to(#d2b384));
    background-image: -webkit-linear-gradient(left, #ecd39d, #d2b384);
    background-image: -moz-linear-gradient(left, #ecd39d, #d2b384);
    background-image: linear-gradient(to right, #ecd39d, #d2b384);
    background-color: #d2b384;
    color: #fff;
    border-radius: 10px;
    display: block;
    border: none;
    padding: 0.45rem 0.45rem;
    font-weight: normal;
    font-size: 0.8rem;
    cursor: pointer;
}
</style>
